<template>
	<view class="page detail u-skeleton">
		<!-- 页面背景 -->
		<view class="top-background" :style="'background: url('+url+') no-repeat 0 0 transparent;'"></view>

		<!-- 返回按钮 -->
		<back-button></back-button>

		<!-- 玩法规则 -->
		<!-- <view @click="router('/pages/box/rules')" class="rule-link">规则</view> -->
		<!-- <view class="wx-share" @click="posterShare">分享</view> -->

		<!-- 盲盒奖品轮播区 -->
		<view class="swiper-box" :style="{marginTop: topSafeArea + 'px'}">
			<swiper @change="swiperChanged" :current="current" class="swiper u-skeleton-rect" :indicator-dots="false"
				:circular="true" :style="{height: '450rpx'}" :autoplay="false" :interval="3000" :duration="1000">
				<template v-for="(item, i) in goodsList">
					<swiper-item :key="i">
						<view class="swiper-item flex-cc">
							<image :src="item.product.image" class="cover u-skeleton-fillet"></image>
						</view>
					</swiper-item>
				</template>
			</swiper>
			<view v-if="swiperProduct" class="product-info flex-cc">
				<!-- <image :src="swiperProduct.tag_big_img" class="tag"></image> -->
				<view class="prob" :class="'prob' + swiperProduct.probability_tag">概率:
					{{probability(swiperProduct.probability_tag)}}%
				</view>
				<view class="name one-line">{{swiperProduct.product.name}}</view>
				<view class="price bold">
					<text class="unit">¥</text>
					<text class="money">{{swiperProduct.product.price}}</text>
				</view>
			</view>
			<view v-else class="product-info u-skeleton-rect"></view>
			<image @click="changeSwiper(0)" src="../../static/box/swiper-left.png" class="swiper-button left"></image>
			<image @click="changeSwiper(1)" src="../../static/box/swiper-right.png" class="swiper-button right"></image>
		</view>

		<!-- 主体数据 -->
		<view class="main-wrap">
			<!-- 概率 -->
			<!-- <view class="header u-skeleton-rect">
				<template v-for="(item, i) in probList">
					<view class="item" :key="i">
						<view class="label" :class="'prob' + (i+1)">{{item.name}}</view>
						<view class="prob">概率 {{item.probability/100}}%</view>
					</view>
				</template>

			</view> -->

			<view v-if="goodsList.length>0" class="list">
				<template v-for="(goods, g) in goodsList">
					<view @click="viewDetail(goods)" class="item" :key="g">
						<!-- <image v-if="goods.tag_img" :src="goods.tag_img" class="icon tag"></image> -->

						<u-image :src="goods.product.image" width="320" height="320" border-radius="16" mode="widthFix">
						</u-image>
						<view class="info-box">
							<view class="name">{{goods.product.name}}</view>
							<view class="price">
								<text class="unit">¥ </text>
								<text class="money">{{goods.product.price}}</text>
								<text class="tips">参考价</text>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view v-else class="empty-box u-skeleton-rect">
				<u-empty mode="list"></u-empty>
			</view>
		</view>

		<!-- 购买按钮 -->
		<view class="buy-wrap">
			<view class="safe-block"></view>
			<view class="blank-block"></view>
			<view class="button-box">
				<view class="buttons flex-rsc">
					<!-- <view @click="handleOpen(false, 5)" class="button purple bold flex-rsc">
						<u-image src="/static/index/new-card.png" width="120" height="78"></u-image>
						<view class="flex-ccc">
							<view style="color: #6A6976; font-size: 24rpx;">¥{{getPrice(detail.price*5)}}</view>
							<view>购5次</view>
						</view>
					</view> -->
					<view class="price">¥{{detail.price}}</view>
					<view @click="handleOpen()" class="button yellow bold flex-rsc">
						<!-- <u-image src="/static/index/new-card.png" width="120" height="78"></u-image> -->
						<!-- <view class="flex-ccc"> -->
							立即购买
						<!-- </view> -->
					</view>
				</view>
<!-- 				<view v-if="config.people_number_switch==1" class="text-info">不满意可最高{{config.active_recycling/10}}折回收,
					已有{{detail.user_count}}人参与</view>
				<view v-else class="text-info">不满意可最高{{config.active_recycling/10}}折回收</view> -->
			</view>

		</view>

		<!-- 商品详情 -->
		<u-popup v-model="showDetail" mode="bottom" border-radius="32">
			<view class="box-detail">
				<view class="header">商品详情</view>

				<view class="detail-wrap">
					<scroll-view class="detail-scroll-view" scroll-y="true">
						<view class="name">{{curProduct.name}}</view>

						<view class="price">
							<!-- <text class="unit">¥ </text>
							<text class="money">{{curProduct.price}}</text> -->
							<text class="tips">参考价 ¥{{curProduct.price}}</text>
						</view>

						<view class="intro">
							<u-parse :html="curProduct.detail" :tag-style="tagStyle"></u-parse>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="showLogin" :show-cancel-button="true" content="请授权手机号">
			<button slot="confirm-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
				class='authorization'>
				确定
			</button>
		</u-modal>

		<!-- 拆盒 -->
		<u-popup v-model="showOpen" mode="bottom" border-radius="32">
			<view class="pay-open">
				<!-- <view class="name">{{orderInfo.name}}</view> -->
				<view class="info-group">
					<view class="item">
						<view class="left">
							<text class="label">单价</text>
						</view>
						<view class="right">
							<!-- 购买金支付 -->
							<template v-if="payParams.use_user_money===1">
								<!-- 折扣价 -->
								<template v-if="orderInfo.config_user_money_discount<100">
									<text class="normal-price">¥ {{orderInfo.price}}</text>
									<text class="bonus">折扣价</text>
									<text class="unit">¥</text>
									<text class="money">{{orderInfo.user_money_price}}</text>
								</template>
								<!-- 无优惠 -->
								<template v-else-if="bonus">
									<text class="normal-price">¥ {{orderInfo.price}}</text>
									<text class="bonus">红包抵扣后</text>
									<text class="unit">¥</text>
									<text class="money">{{orderInfo.pay_money}}</text>
								</template>
								<template v-else>
									<text class="unit">¥</text>
									<text class="money">{{orderInfo.price}}</text>
								</template>
							</template>
							<!-- 微信支付 -->
							<template v-else>
								<!-- 红包抵扣 -->
								<template v-if="bonus && !orderInfo.try_play">
									<text class="normal-price">¥ {{orderInfo.price}}</text>
									<text class="bonus">红包抵扣后</text>
									<text class="unit">¥</text>
									<text class="money">{{orderInfo.pay_money}}</text>
								</template>
								<!-- 无优惠 -->
								<template v-else>
									<template v-if="orderInfo.try_play">
										<text class="test">试玩</text>
										<text class="unit">¥</text>
										<text class="money">{{orderInfo.pay_money}}</text>
									</template>
									<template v-else>
										<text class="unit">¥</text>
										<text class="money">{{orderInfo.price}}</text>
									</template>
								</template>
							</template>
						</view>
					</view>
					<view class="item">
						<view class="left">
							<image src="../../static/box/icon-buy-money.png" class="icon"></image>
							<text class="label">玉石支付</text>
						</view>
						<view class="right">
							<template v-if="!orderInfo.is_user_money">
								<text class="tips">余额不足</text>
								<image src="../../static/box/icon-radio.png" class="icon"></image>
							</template>
							<template v-else>
								<image v-if="payParams.use_user_money===1" src="../../static/box/icon-radio-checked.png"
									class="icon"></image>
								<image v-else @click="payParams.use_user_money=1" src="../../static/box/icon-radio.png"
									class="icon"></image>
							</template>
						</view>
					</view>
					<view class="item">
						<view class="left">
							<image src="../../static/box/icon-wechat.png" class="icon"></image>
							<text class="label">微信支付</text>
						</view>
						<view class="right">
							<image v-if="payParams.use_user_money===0" src="../../static/box/icon-radio-checked.png"
								class="icon"></image>
							<image v-else @click="payParams.use_user_money=0" src="../../static/box/icon-radio.png"
								class="icon"></image>
						</view>
					</view>
				</view>

				<view class="agree">同意<text @click="viewPage('/pages/box/agreement')">《用户购买协议》</text></view>

				<view class="button-box">
					<view @click="handlePay()" class="button">确认支付</view>
				</view>
			</view>
		</u-popup>

		<!-- 海报 -->
		<view class="posterBack" v-if="posterShow" @click="posterShow = false"></view>
		<view v-if="posterShow" class="posterBacks">
			<view class="shareImg1">
				<image :src="imgSrc" :style="'width:'+w+'rpx;height:'+h+'rpx;margin:auto;margin-top:160rpx'"
					v-if="imgSrc != ''"></image>
				<canvas canvas-id="shareImg" :style="'width:'+w+'rpx;height:'+h+'rpx;margin:auto;margin-top:160rpx'"
					v-show="imgSrc == ''"></canvas>
			</view>
			<view class="maksbox"></view>
			<view class="canvas_nav">
				<view class="canvas_nav_top">
					<button plain="true" open-type="share" class="canvas-child">
						<u-image style="margin-top: 20rpx;" src="/static/index/weath-icon.png" width="96" height="96"></u-image>
						<view>分享好友</view>
					</button>
					<view class="canvas-child" @click="SaveCard">
						<u-image src="/static/index/download-icon.png" width="96" height="96"></u-image>
						<view>下载海报</view>
					</view>
				</view>
				<view class="canvas_nav-bottom" @click="posterShow = false">取消</view>
			</view>
		</view>

		<!-- 提示信息 -->
		<u-toast ref="uToast" />

		<!--骨架屏-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex"

	export default {
		data() {
			return {
				ids: 0,

				showLogin: false,
				loading: true,
				openLoading: false,
				query: {},
				topSafeArea: uni.getSystemInfoSync().statusBarHeight,
				// 顶部轮播
				current: 0,
				swiperProduct: null,

				queryParams: {
					blind_box_id: '',
					page: 1,
					limit: 10,
				},
				probList: [],
				goodsList: [],
				detail: {},
				showDetail: false,
				curProduct: {},
				tagStyle: {
					p: 'color: #2E2B2B; font-size: 24rpx; line-height: 36rpx; margin-bottom: 20rpx;',
					span: 'font-size: 24rpx;',
					img: 'max-width: 702rpx; margin-top: 20rpx;'
				},

				// 拆盒
				test: false,
				showOpen: false,
				orderInfo: {},
				bonus: uni.getStorageSync('bonus') || null,
				payParams: {
					order_main_id: '',
					use_user_money: 0
				},
				posterShow: false, //海报
				imgSrc: '',
				w: 570,
				h: 786,
				goodsImg: '', //商品图
				avatar: '', //头像
				qrcode: '', //二维码
				arrow: '',
				icon1: '',
				
				url:this.$net.url+'/addons/lingchi_guess_box/public/wxapp/bg.png'
			}
		},
		computed: {
			...mapGetters(['userInfo', 'config']),
			probability() {
				return function(id) {
					let filters = this.probList.filter(item => {
						return item.id == id
					})
					
					if (this.probList.length > 0 && filters.length > 0) {
						return filters[0].probability / 100
					} else {
						return 0
					}
				}
			},
		},
		onLoad(query) {
			let obj = {
				blind_box_id: 0
			}
			let blind_box_id = 0

			if (query.blind_box_id) {
				
				this.ids = query.blind_box_id
				obj.blind_box_id = query.blind_box_id
				blind_box_id = query.blind_box_id
			} else if (query.scene) {
				let scene = decodeURIComponent(query.scene) //
				this.ids = scene.split('!')[0].split('-')[1]
				obj.blind_box_id = scene.split('!')[0].split('-')[1]
				blind_box_id = scene.split('!')[0].split('-')[1]
				this.get_fans(scene.split('!')[1].split('-')[1])
				
			}
			if (blind_box_id) {
				
				this.queryParams.blind_box_id = blind_box_id
			}
			this.query = obj

			this.getProb()
			this.getList()
			this.getDetail()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			...mapActions(['setUser']),
			get_fans(share_id) {
				this.$net.req('/user/fans', {
					parent_user_id: share_id,
				}, false).then(res => {

				})
			},
			viewPage(url) {
				this.router(url)
			},
			getPrice(num) {
				return num*5

			},
			// 获取手机号
			getPhoneNumber(e) {
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					let data = {
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData
					}
					this.$net.req('/user/getMobile', data, false).then(res => {
						if (res.code == 200) {
							this.getMine()
						}
					})
				} else {
					uni.showToast({
						title: '用户拒绝授权',
						icon: 'none',
						mask: true
					})
					return
				}
			},
			// 点击箭头切换
			changeSwiper(type) {
				let max = this.goodsList.length - 1
				switch (type) {
					case 0:
						if (this.current === 0) {
							this.current = max
						} else {
							--this.current
						}
						break;
					case 1:
						if (this.current === max) {
							this.current = 0
						} else {
							++this.current
						}
						break;
				}
			},
			// 轮播滑动处理
			swiperChanged(e) {
				this.current = e.detail.current
				this.swiperProduct = this.goodsList[this.current]
			},
			
			// 拆盒
			handleOpen(test = false, number = 1) {
				this.test = test
				if (this.userInfo.nickName == '') {
					uni.showToast({
						title: '请先授权',
						icon: 'none'
					})
					this.getUserProfile()
					return
				}
				
				if(this.userInfo.idcard_auth==0){
					uni.showToast({
						title: '请先实名认证',
						duration: 2000,
						icon: "none"
					});
					uni.navigateTo({
						url:'/pages/newPage/realName'
					})
					return
				}
				if(this.userInfo.mobile==''){
					uni.showToast({
						title: '请先绑定手机号',
						duration: 2000,
						icon: "none"
					});
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/index'
						})
					},1000)
					return
				}

				const {
					blind_box_id
				} = this.detail


				let data
				if (this.bonus && this.bonus.end_time > Math.ceil(new Date().getTime() / 1000)) {
					const {
						bonus_id
					} = this.bonus
					data = {
						blind_box_id,
						bonus_id,
						number
					}
				} else {
					data = {
						blind_box_id,
						number
					}
					uni.setStorageSync('bonus', '')
				}

				// 试玩
				if (test) {
					data.try_play = 1
				}

				if (this.openLoading) return
				this.openLoading = true

				this.$net.req('/createOrder/confirm', data).then(res => {
					this.loading = false
					this.openLoading = false

					if (res.code === 200) {
						console.log(res.data)
						this.orderInfo = res.data
						const {
							order_main_id,
							is_user_money
						} = res.data
						this.payParams.order_main_id = order_main_id
						this.payParams.use_user_money = is_user_money ? 1 : 0
						this.showOpen = true
					}
				})

			},
			// 关闭拆盒窗口(未确认支付)
			handleCloseOpen() {
				this.current = -1
				this.curBoxItem = null
			},
			// 确认支付
			handlePay() {
				let test = this.test ? 1 : 0

				if (this.payParams.use_user_money === 1) {
					this.payMoney(test)
				} else {
					this.wechatPay(test)
				}
			},
			viewOpen(test) {
				const {
					blind_box_id
				} = this.detail
				const {
					order_main_id
				} = this.orderInfo
				uni.redirectTo({
					url: `/pages/box/open?blind_box_id=${blind_box_id}&order_main_id=${order_main_id}&test=${test}`
				});
			},
			// 购买金支付
			payMoney(test) {
				this.$net.req('/create_order/pay', this.payParams).then(res => {
					this.loading = false
					const {
						pay_state
					} = res.data
					if (res.code === 200 && pay_state === 1) {


						this.showOpen = false
						// this.showPayComplete = true

						uni.setStorageSync('bonus', '')
						this.getMine()
						this.viewOpen(test)
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})
					}
				})
			},
			// 微信支付
			wechatPay(test) {
				let _this = this;
				wx.requestPayment({
					..._this.orderInfo.payment,
					success(res) {
						_this.showOpen = false
						// _this.showPayComplete = true
						_this.getMine()
						uni.setStorageSync('bonus', '')
						// 前往开盒页面
						_this.viewOpen(test)
					},
					fail(err) {
						_this.$refs.uToast.show({
							title: '支付失败！',
							type: 'error',
						})
					},
					complete(res) {
						
					}
				})
			},

			// 查看奖品详情
			viewDetail(item) {
				const {
					product_id
				} = item
				this.$net.req('/BlindBox/productDetail', {
					product_id
				}, false).then(res => {
					if (res.code === 200) {
						this.curProduct = res.data
						this.showDetail = true
					}
				})

			},
			// 授权登录
			getUserProfile() {
				let that = this
				this.router('/pages/login/index')
				return
				wx.getUserProfile({
					desc: '用于完善个人信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						that.updateUser(res.userInfo)
					}
				})
			},
			updateUser(data) {
				this.$net.req('/user/update', {
					data
				}).then(res => {
					// return
					if (res.code == 200) {
						if (this.userInfo.mobile == '') {
							this.showLogin = true
						}
						this.setUser(data)
						this.getMine()
					}
				})
			},
			// 获取用户信息
			getMine() {
				this.$net.req('/user/getMine', {}, false).then(res => {
					if (res.code === 200) {
						this.setUser(res.data)
					}
				})
			},
			// 获取概率信息
			getProb() {
				this.$net.req('/BlindBox/ProductProbability', {}, false).then(res => {
					if (res.code === 200) {
						this.probList = res.data
					}
				})
			},
			// 获取盲盒详情
			getDetail() {
				this.$net.req('/BlindBox/blindBoxDetail', {
					blind_box_id: this.query.blind_box_id
				}, false).then(res => {
					if (res.code === 200) {
						this.detail = res.data
					}
				})
			},
			// 获取奖品信息
			getList() {
				this.$net.req('/BlindBox/blindBoxProducts', this.queryParams, false).then(res => {
					this.loading = false
					if (res.code === 200) {
						if (this.queryParams.page === 1) {
							this.goodsList = res.data.list
							if (this.goodsList.length > 0) this.swiperProduct = this.goodsList[this.current]

						} else if (res.data.list.length > 0) {
							this.goodsList = this.goodsList.concat(res.data.list)
						}

						if (res.data.list.length > 0) {
							++this.queryParams.page
						} else if (this.queryParams.page > 1) {
							// this.$refs.uToast.show({
							// 	title: '没有更多数据了！',
							// 	type: 'info'
							// })
						}
					}
				})
			},
			// 生成海报
			posterShare() {
				let _this = this
				this.posterShow = true
				if (this.imgSrc != '') {
					return; //判断that.imgSrc是不是空的字符串，如果是空的就继续画图，如果不是空的就return返回that.imgSrc它已经有的字符串
				}
				console.log(_this.ids)
				this.$net.req('/user/getMiniCode', {
					box_id: this.ids
				}, false).then(res => {
					console.log(_this.res)
					if (res.code === 200) {
						uni.showLoading({
							title: '图片生成中...',
							mask: true
						})
						if (this.userInfo.avatarUrl) {
							this.downloadImg('avatar', this.userInfo.avatarUrl)
						} else {
							uni.showToast({
								title: '请先同步信息',
								icon: 'none'
							});
						}
						_this.qrcode = res.data.qrcode.replace('http://','https://')
						
						this.downloadImg('goodsImg', this.detail.image)
						this.downloadImg('icon1', res.data.arrow)
						this.downloadImg('qrcode', res.data.qrcode)
					} else {
						uni.showToast({
							title: '二维码生成失败',
							icon: 'none'
						});
					}
				})
			},
			SaveCard() {
				let that = this;
				let tempFilePaths = that.imgSrc //tempFilePaths定义一下海报的的临时地址
				wx.saveImageToPhotosAlbum({
					filePath: tempFilePaths,
					success(res) {
						uni.showToast({
							icon: "none",
							title: "图片保存成功"
						})
						// that.showShare = false
					}
				})
			},
			downloadImg(str, url) {
				var that = this;
				uni.downloadFile({
					url: url,
					success: function(res3) {
						that[str] = res3.tempFilePath
						if (that.avatar != '' && that.goodsImg != '' && that.qrcode != '' && that.icon1 !=
							'') {
							uni.hideLoading(); //隐藏图片加载旋转标志
							that.draw()
						}
					},
					fail: function(err) {
						uni.hideLoading();
						uni.showToast({
							title: '海报制作失败，图片下载失败(海报模版)',
							icon: 'none'
						});
					}
				})
			},
			px_to_rpx(e) {
				return (e / 2) * (wx.getSystemInfoSync().windowWidth / 375)
			},
			darwRoundRect(x, y, w, h, r, ctx, color) {
				ctx.save()
				ctx.beginPath()
				ctx.arc(x + r, y + r, r, 1 * Math.PI, 1.5 * Math.PI)
				ctx.moveTo(x, y + r)
				ctx.lineTo(x, y + h - r)
				ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, 1 * Math.PI)
				ctx.lineTo(x + r, y + h)
				ctx.lineTo(x + w - r, y + h)
				ctx.arc(x + w - r, y + h - r, r, 0 * Math.PI, 0.5 * Math.PI)
				ctx.lineTo(x + w, y + h - r)
				ctx.lineTo(x + w, y + r)
				ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI)
				ctx.lineTo(x + w - r, y)
				ctx.lineTo(x + r, y)
				ctx.setFillStyle(color)
				ctx.fill()
				ctx.restore();
			},
			async drawImg(url, x, y, w, h, ctx) {
				let _this = this;
				ctx.drawImage(url, _this.px_to_rpx(x), _this.px_to_rpx(y), _this
					.px_to_rpx(w), _this.px_to_rpx(h));
			},
			async draw() {
				let _this = this;

				let ctx = uni.createCanvasContext('shareImg', this)
				//第一层背景
				ctx.setFillStyle('#FFFFFF')
				ctx.fillRect(0, 0, _this.px_to_rpx(_this.w), _this.px_to_rpx(_this.h))
				ctx.restore();
				//奖品图
				_this.drawImg(_this.goodsImg, 20, 20, 570, 570, ctx)
				// 小图标
				_this.drawImg(_this.icon1, 20, 595, 40, 40, ctx)
				// 商品标签
				ctx.setFillStyle('#2E2B2B')
				ctx.setFontSize(_this.px_to_rpx(28))
				ctx.fillText('扫码进入', _this.px_to_rpx(70), _this.px_to_rpx(625));
				// ctx.fillText('Shopping Go', _this.px_to_rpx(70), _this.px_to_rpx(625));

				// 价钱
				ctx.setFillStyle('#DFC791')
				ctx.setFontSize(_this.px_to_rpx(28))
				ctx.fillText('￥' + _this.detail.price, _this.px_to_rpx(286), _this.px_to_rpx(625));
				// 二维码
				_this.drawImg(_this.qrcode, 408, 528, 122, 122, ctx)
				// 商品名称 
				let names = _this.detail.name
				let name
				// let names = '超长名称测试用不换行省略号显示问题阿斯蒂芬看见了开皇冠老虎机'
				if (names.length > 20) {
					name = names.slice(0, 15) + '...'
				} else {
					name = names
				}
				ctx.setFillStyle('#2E2B2B')
				ctx.setFontSize(_this.px_to_rpx(28))
				ctx.fillText(name, _this.px_to_rpx(20), _this.px_to_rpx(700));
				// 标签
				ctx.setFillStyle('#C3C2C1')
				ctx.setFontSize(_this.px_to_rpx(24))
				ctx.fillText('邀请好友下单反玉石', _this.px_to_rpx(20), _this.px_to_rpx(748));

				//头像
				// ctx.save();
				// ctx.beginPath();
				// ctx.arc(_this.px_to_rpx(62), _this.px_to_rpx(796), _this.px_to_rpx(32), 0, Math.PI *
				// 	2, false);
				// ctx.clip();
				// ctx.drawImage(_this.avatar, _this.px_to_rpx(14), _this.px_to_rpx(752), _this
				// 	.px_to_rpx(96), _this.px_to_rpx(96)); //绘制图
				// ctx.restore();
				ctx.draw(true, () => {
					setTimeout(function() {
						uni.canvasToTempFilePath({
							canvasId: 'shareImg',
							fileType: 'jpg',
							x: 0,
							y: 0,
							width: _this.px_to_rpx(_this.w) * 8, //四倍图，防止模糊
							height: _this.px_to_rpx(_this.h) * 8,
							destWidth: _this.px_to_rpx(_this.w) * 8,
							destHeight: _this.px_to_rpx(_this.h) * 8,
							success: function(res) {
								_this.imgSrc = res.tempFilePath
							},
							fail: function(error) {},
						})
					}, 100)
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page.detail {
		background: #292C2D;

		.top-background {
			width: 750rpx;
			height: 840rpx;
			
			background-size: 750rpx 840rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.rule-link {
			position: absolute;
			top: 212rpx;
			right: 0;
			z-index: 10;
			width: 56rpx;
			height: 100rpx;
			font-size: 28rpx;
			font-weight: bold;
			writing-mode: tb-rl;
			letter-spacing: 15rpx;
			color: #FFFFFF;
			line-height: 56rpx;
			text-align: center;
			background: #8ED4FE;
			border-radius: 16rpx 0 0 16rpx;
			padding-top: 12rpx;
		}

		.wx-share {
			position: absolute;
			top: 340rpx;
			right: 0;
			z-index: 10;
			width: 56rpx;
			height: 100rpx;
			font-size: 28rpx;
			font-weight: bold;
			writing-mode: tb-rl;
			letter-spacing: 15rpx;
			color: #2F2E3B;
			line-height: 56rpx;
			text-align: center;
			background: #DFC791;
			border-radius: 16rpx 0 0 16rpx;
			padding-top: 12rpx;
		}

		.swiper-box {
			width: 750rpx;
			height: 880rpx;
			padding-top: 152rpx;
			position: relative;
			z-index: 1;


			.swiper-item {
				margin: 0 24rpx;

				.cover {
					width: 450rpx;
					height: 450rpx;
				}
			}

			.product-info {
				width: 702rpx;
				height: 306rpx;
				background: #292C2D;
				border-radius: 16rpx;
				padding: 32rpx 94rpx;
				margin: 70rpx 24rpx 0;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 2;

				.tag {
					width: 360rpx;
					height: 74rpx;
				}

				.prob {
					font-size: 28rpx;
					line-height: 38rpx;
					margin-top: 10rpx;

					&.prob1 {
						color: #FFFFFF;
					}

					&.prob2 {
						color: #FFFFFF;
					}

					&.prob3 {
						color: #FFFFFF;
					}

					&.prob4 {
						color: #FFFFFF;
					}
				}

				.name {
					height: 38rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 38rpx;
					margin-top: 20rpx;
				}

				.price {
					height: 48rpx;
					font-size: 36rpx;
					color: #DFC791;
					margin-top: 16rpx;

					.unit {
						font-size: 24rpx;
						margin-right: 10rpx;
					}
				}
			}

			.swiper-button {
				width: 32rpx;
				height: 96rpx;
				position: absolute;
				bottom: 116rpx;
				z-index: 3;

				&.left {
					left: 48rpx;
				}

				&.right {
					right: 48rpx;
				}
			}
		}

		.main-wrap {
			width: 100%;
			padding: 24rpx;
			padding-top: 0rpx;
			padding-bottom: 50rpx;
			.header {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 702rpx;
				height: 142rpx;
				background: #FFFFFF;
				border: 2rpx solid #2F2E3B;
				border-radius: 12rpx;

				.item {
					flex: 1;
					text-align: center;


					.label {
						height: 36rpx;
						font-size: 28rpx;
						line-height: 36rpx;

						&.prob1 {
							color: #2F2E3B;
						}

						&.prob2 {
							color: #2F2E3B;
						}

						&.prob3 {
							color: #2F2E3B;
						}

						&.prob4 {
							color: #2F2E3B;
						}
					}

					.prob {
						height: 32rpx;
						font-size: 24rpx;
						color: #999999;
						line-height: 32rpx;
						margin-top: 10rpx;
					}
				}
			}

			.list {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				width: 702rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				// 商品数据块
				// margin-top: 30rpx;
				padding: 20rpx;


				.item {
					width: 320rpx;
					height: 492rpx;
					margin-bottom: 24rpx;
					position: relative;

					.icon.tag {
						width: 92rpx;
						height: 48rpx;
						position: absolute;
						top: 10rpx;
						left: 10rpx;
						z-index: 10;
					}

					.info-box {
						padding: 20rpx;

						.name {
							height: 72rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: #2E2B2B;
							line-height: 36rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.price {
							height: 40rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: #DFC791;
							line-height: 40rpx;
							// margin-top: 20rpx;

							.unit {
								font-size: 24rpx;
								margin-right: 10rpx;
							}

							.tips {
								font-size: 24rpx;
								color: #C3C2C1;
								margin-left: 20rpx;
							}
						}
					}
				}
			}

			.empty-box {
				min-height: 60vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.icon.test-play {
			width: 112rpx;
			height: 112rpx;
			position: fixed;
			bottom: 250rpx;
			right: 24rpx;
			z-index: 100;
		}

		.buy-wrap {
			.blank-block {
				width: 750rpx;
				height: 202rpx;
			}

			.safe-block {
				// width: 750rpx;
				// height: 150rpx;
				// background-color: #FFF;
				// border-radius: 32rpx 32rpx 0 0;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 99;
			}

			.button-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 50px;
				background: #000000;
				position: fixed;
				bottom: 0;
				left: 0;
				padding: 16px 12px;
				box-sizing: border-box;
				display: flex;
				justify-content: center;

				.buttons {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 50px;
					background: #000000;
					position: fixed;
					bottom: 0;
					left: 0;
					padding: 16px 12px;
					box-sizing: border-box;
					display: flex;
					.price{
						font-size: 24px;
						color: #FFFFFF;
					}
					.button { //立即购买按钮
						width: 50%;
						height: 45px;
						background: #DFC791;
						border-radius: 8px;
						// border: 2px solid #2F2E3B;
						font-size: 16px;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: 500;
						color: #2F2E3B;
						line-height: 45px;
						display: flex;
						justify-content: center;
						&.purple {
							background: #FFFFFF;
							// background: url(../../static/box/btn-purple.png) no-repeat 0 0 transparent;
							// background-size: 338rpx 80rpx;
						}

						&.yellow {
							background: #DFC791;
							// background: url(../../static/box/btn-yellow.png) no-repeat 0 0 transparent;
							// background-size: 338rpx 80rpx;
						}

					}
				}

				.text-info {
					height: 34rpx;
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
					text-align: center;
					margin-top: 24rpx;
				}
			}
		}

		.box-detail {
			width: 750rpx;
			background: #292C2D;
			border-radius: 32rpx 32rpx 0 0;
			padding: 32rpx 24rpx;

			.header {
				height: 40rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #BFC0C0;
				line-height: 40rpx;
				text-align: center;
			}

			.detail-wrap {
				height: 834rpx;
				margin-top: 48rpx;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #BFC0C0;
					line-height: 48rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.price {
					height: 40rpx;
					font-size: 36rpx;
					color: #99997D;
					line-height: 40rpx;
					margin-top: 20rpx;

					.unit {
						font-size: 24rpx;
						margin-right: 10rpx;
					}

					.money {
						font-weight: bold;
					}

					.tips {
						font-size: 24rpx;
						color: #999;
						line-height: 32rpx;
						// margin-left: 20rpx;
					}
				}

				.intro {
					margin-top: 32rpx;
				}
			}
		}

		.pay-open {
			width: 750rpx;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0 0;
			padding: 32rpx 24rpx;

			// .name {
			// 	height: 48rpx;
			// 	font-size: 36rpx;
			// 	font-weight: bold;
			// 	color: #101010;
			// 	line-height: 48rpx;
			// 	white-space: nowrap;
			// 	text-overflow: ellipsis;
			// 	overflow: hidden;
			// }

			.info-group {
				// margin-top: 18rpx;

				.item {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					height: 102rpx;
					border-bottom: 2rpx solid #F0F0F0;


					.left,
					.right {
						display: flex;
						flex-direction: row;
						justify-content: left;
						align-items: flex-end;
					}

					.left {
						.icon {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}

						text {
							font-size: 28rpx;
							color: #2E2B2B;
							line-height: 40rpx;
						}
					}

					.right {
						.tips {
							font-size: 24rpx;
							color: #999;
							line-height: 40rpx;
						}

						.normal-price {
							font-size: 28rpx;
							color: #999999;
							text-decoration: line-through;
							margin-right: 20rpx;
						}

						.bonus {
							font-size: 24rpx;
							color: #DFC791;
							margin-right: 10rpx;
						}

						.test {
							font-size: 28rpx;
							color: #F8852A;
							margin-right: 20rpx;
						}

						.unit {
							font-size: 24rpx;
							color: #DFC791;
							margin-right: 6rpx;
						}

						.money {
							font-size: 36rpx;
							color: #DFC791;
							line-height: 40rpx;
						}

						.icon {
							width: 44rpx;
							height: 44rpx;
							margin-left: 18rpx;
						}
					}
				}
			}

			.agree {
				height: 40rpx;
				font-size: 28rpx;
				color: #2E2B2B;
				line-height: 40rpx;
				margin-top: 34rpx;

				text {
					color: #DFC791;
				}
			}

			.button-box {
				width: 702rpx;
				height: 96rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #2F2E3B;
				line-height: 96rpx;
				text-align: center;
				background: #DFC791;
				// border: 2rpx solid #2F2E3B;
				border-radius: 16rpx;
				margin-top: 48rpx;
			}

		}

		// 海报
		.posterBack {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba($color: #000000, $alpha: 0.7);
			z-index: 999;
		}

		.posterBacks {
			position: fixed;
			z-index: 99999;

			.shareImg1 {
				position: fixed;
				top: 0rpx;
				left: 0%;
				width: 100%;
				height: calc(100vh - 360rpx);
				overflow: auto;
				z-index: 100;
				text-align: center;
			}

			.canvas_nav {
				width: 750rpx;
				height: 356rpx;
				// background: #F6F6F6;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 0px 0px;
				position: fixed;
				bottom: 0;
				z-index: 99999;
				left: 0;
				padding: 40rpx 108rpx;

				.canvas_nav_top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.canvas-child {
						width: 162rpx;
						height: 162rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #333333;
						padding: 0;
						border: none;
						margin: 0;

						view {
							margin-top: 16rpx;
						}
					}

				}
			}

			.canvas_nav-bottom {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 112rpx;
				background: #FFFFFF;
				text-align: center;
				line-height: 112rpx;
				font-size: 32rpx;
				color: #333330;
				left: 0;
			}
		}
	}
</style>
